<!--
 * @Description: {{ByRuin}}
 * @Version: 2.0
 * @Author: Ruin 🍭
 * @Date: 2021-12-28 10:31:42
 * @LastEditors: 刘引
 * @LastEditTime: 2022-01-04 14:45:28
-->
<template>
  <div class="header">
    <div class="w">
      <div class="container">
        <div class="logo">
          <router-link to="/">
            <span>
              <img src="../assets/img/common/logo.png" alt="淘芯" />
            </span>
            <span v-if="this.$store.state.isChange == false">电子元器件采购&nbsp;选淘芯更放心</span>
            <span
              v-if="this.$store.state.isChange == true"
              style="font-size: 14px;"
            >procurement of electronic components，Taoxin is more reliable</span>
          </router-link>
        </div>

        <div class="phone-lang">
          <span class="phone">
            <img src="../assets/img/common/phone.png" alt="电话" />
            <span>0755-83957814</span>
          </span>
          <span class="language">
            <svg
              t="1640664001181"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1309"
              width="16"
              height="16"
              v-if="this.$store.state.isChange == false"
            >
              <path
                d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"
                fill="#E94B35"
                p-id="1310"
              />
              <path
                d="M266.666667 373.333333l-94.037334 65.450667 33.173334-109.653333-91.306667-69.248 114.56-2.346667L266.666667 149.333333l37.610666 108.224 114.56 2.346667-91.306666 69.205333 33.173333 109.653334zM442.154667 186.709333l-29.525334 7.808 18.304-24.448-16.554666-25.664 28.906666 9.856 19.306667-23.68-0.426667 30.549334 28.48 11.029333-29.205333 9.024-1.685333 30.506667zM541.866667 268.693333l-13.013334 27.648-6.933333-29.738666-30.314667-3.84 26.133334-15.786667L512 216.96l23.125333 19.968 26.752-14.72-11.84 28.16 22.272 20.906667zM530.368 381.546667l-27.733333 12.821333 13.802666-27.264-20.778666-22.4 30.186666 4.693333 14.890667-26.666666 4.864 30.144 29.994667 5.930666-27.2 13.930667 3.626666 30.336zM442.154667 464.042667l-29.525334 7.808 18.304-24.448-16.554666-25.664 28.906666 9.856 19.306667-23.68-0.426667 30.549333 28.48 11.029333-29.205333 9.024-1.685333 30.506667z"
                fill="#F2C500"
                p-id="1311"
              />
            </svg>
            <svg
              t="1640663547437"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1007"
              width="16"
              height="16"
              v-if="this.$store.state.isChange"
            >
              <path
                d="M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z"
                fill="#F0F0F0"
                p-id="1008"
              />
              <path
                d="M105.84 200.284C65.622 252.61 35.296 312.92 17.638 378.438h266.356L105.84 200.284z m900.522 178.154c-17.658-65.516-47.986-125.826-88.202-178.152L740.01 378.438h266.352zM17.638 645.568c17.66 65.516 47.986 125.826 88.202 178.15l178.148-178.15H17.638z m806.078-539.726C771.39 65.624 711.082 35.298 645.564 17.638v266.354l178.152-178.15zM200.284 918.158c52.326 40.218 112.636 70.544 178.152 88.204V740.01L200.284 918.158z m178.15-900.52c-65.516 17.66-125.826 47.986-178.15 88.202l178.15 178.15V17.638z m267.132 988.724c65.516-17.66 125.826-47.986 178.15-88.202l-178.15-178.15v266.352z m94.444-360.794L918.16 823.72c40.216-52.324 70.544-112.636 88.202-178.152H740.01z"
                fill="#0052B4"
                p-id="1009"
              />
              <path
                d="M1019.666 445.218H578.784V4.334A517.112 517.112 0 0 0 512 0a517.011 517.011 0 0 0-66.782 4.334v440.882H4.334A517.112 517.112 0 0 0 0 512c0 22.638 1.488 44.922 4.334 66.782h440.882v440.884a516.7 516.7 0 0 0 133.566 0V578.784h440.884A517.066 517.066 0 0 0 1024 512c0-22.634-1.488-44.922-4.334-66.782z"
                fill="#D80027"
                p-id="1010"
              />
              <path
                d="M645.566 645.568L874.038 874.04a513.272 513.272 0 0 0 30.096-32.87L708.53 645.566h-62.964v0.002z m-267.132 0h-0.004l-228.47 228.47a513.272 513.272 0 0 0 32.87 30.096l195.604-195.608v-62.958z m0-267.13v-0.004L149.962 149.96a513.272 513.272 0 0 0-30.096 32.87l195.606 195.606h62.962z m267.132 0L874.04 149.962a512.656 512.656 0 0 0-32.87-30.094L645.566 315.474v62.964z"
                fill="#D80027"
                p-id="1011"
              />
            </svg>
            <!-- 语言 -->
            <span style="padding:0 5px;" v-if="this.$store.state.isChange == false">语言</span>
            <span style="padding:0 5px;" v-if="this.$store.state.isChange">Language</span>

            <svg
              t="1640663158217"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6141"
              width="12"
              height="12"
            >
              <path
                d="M480.734844 723.480575C498.232302 739.948506 525.833655 739.88643 543.265156 723.480575L950.080945 340.601305C962.15796 329.234887 962.857272 310.097487 951.6429 297.856728 940.428528 285.615969 921.547129 284.907176 909.470114 296.273595L502.654325 679.152865C508.079551 674.046852 515.901757 674.02926 521.345675 679.152865L114.529886 296.273595C102.452871 284.907176 83.571471 285.615969 72.3571 297.856728 61.142729 310.097487 61.84204 329.234887 73.919055 340.601305L480.734844 723.480575Z"
                p-id="6142"
              />
            </svg>
            <div class="dropdown">
              <ul>
                <li @click="changeLg(0)" :class="this.$store.state.isChange ? '' : 'isSelected'">
                  <svg
                    t="1640664001181"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="1309"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"
                      fill="#E94B35"
                      p-id="1310"
                    />
                    <path
                      d="M266.666667 373.333333l-94.037334 65.450667 33.173334-109.653333-91.306667-69.248 114.56-2.346667L266.666667 149.333333l37.610666 108.224 114.56 2.346667-91.306666 69.205333 33.173333 109.653334zM442.154667 186.709333l-29.525334 7.808 18.304-24.448-16.554666-25.664 28.906666 9.856 19.306667-23.68-0.426667 30.549334 28.48 11.029333-29.205333 9.024-1.685333 30.506667zM541.866667 268.693333l-13.013334 27.648-6.933333-29.738666-30.314667-3.84 26.133334-15.786667L512 216.96l23.125333 19.968 26.752-14.72-11.84 28.16 22.272 20.906667zM530.368 381.546667l-27.733333 12.821333 13.802666-27.264-20.778666-22.4 30.186666 4.693333 14.890667-26.666666 4.864 30.144 29.994667 5.930666-27.2 13.930667 3.626666 30.336zM442.154667 464.042667l-29.525334 7.808 18.304-24.448-16.554666-25.664 28.906666 9.856 19.306667-23.68-0.426667 30.549333 28.48 11.029333-29.205333 9.024-1.685333 30.506667z"
                      fill="#F2C500"
                      p-id="1311"
                    />
                  </svg>中文简体
                </li>
                <li @click="changeLg(1)" :class="this.$store.state.isChange ? 'isSelected' : ''">
                  <svg
                    t="1640663547437"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="1007"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z"
                      fill="#F0F0F0"
                      p-id="1008"
                    />
                    <path
                      d="M105.84 200.284C65.622 252.61 35.296 312.92 17.638 378.438h266.356L105.84 200.284z m900.522 178.154c-17.658-65.516-47.986-125.826-88.202-178.152L740.01 378.438h266.352zM17.638 645.568c17.66 65.516 47.986 125.826 88.202 178.15l178.148-178.15H17.638z m806.078-539.726C771.39 65.624 711.082 35.298 645.564 17.638v266.354l178.152-178.15zM200.284 918.158c52.326 40.218 112.636 70.544 178.152 88.204V740.01L200.284 918.158z m178.15-900.52c-65.516 17.66-125.826 47.986-178.15 88.202l178.15 178.15V17.638z m267.132 988.724c65.516-17.66 125.826-47.986 178.15-88.202l-178.15-178.15v266.352z m94.444-360.794L918.16 823.72c40.216-52.324 70.544-112.636 88.202-178.152H740.01z"
                      fill="#0052B4"
                      p-id="1009"
                    />
                    <path
                      d="M1019.666 445.218H578.784V4.334A517.112 517.112 0 0 0 512 0a517.011 517.011 0 0 0-66.782 4.334v440.882H4.334A517.112 517.112 0 0 0 0 512c0 22.638 1.488 44.922 4.334 66.782h440.882v440.884a516.7 516.7 0 0 0 133.566 0V578.784h440.884A517.066 517.066 0 0 0 1024 512c0-22.634-1.488-44.922-4.334-66.782z"
                      fill="#D80027"
                      p-id="1010"
                    />
                    <path
                      d="M645.566 645.568L874.038 874.04a513.272 513.272 0 0 0 30.096-32.87L708.53 645.566h-62.964v0.002z m-267.132 0h-0.004l-228.47 228.47a513.272 513.272 0 0 0 32.87 30.096l195.604-195.608v-62.958z m0-267.13v-0.004L149.962 149.96a513.272 513.272 0 0 0-30.096 32.87l195.606 195.606h62.962z m267.132 0L874.04 149.962a512.656 512.656 0 0 0-32.87-30.094L645.566 315.474v62.964z"
                      fill="#D80027"
                      p-id="1011"
                    />
                  </svg>English
                </li>
              </ul>
            </div>
          </span>
        </div>
      </div>
    </div>
  </div>
  <!-- <div>{{ isChange }}</div> -->
</template>
<script lang ="ts">
// import { mapState, Getter, mapGetters } from "vuex";
export default {
  data() {
    return {
      // flagLg: this.$store.state.isChange,
    }
  },
  computed: {
    // @ts-ignore
    // ...mapState(['isChange']),
  },
  methods: {
    changeLg(kind: number) {
      if (kind === 0) {
        // @ts-ignore
        this.$store.commit("changeFalse");

      } else if (kind === 1) {
        // @ts-ignore
        this.$store.commit("changeTrue");

      }
      console.log("改变", kind);

    }
  },
  created() {



  }

}
</script>
<style lang="scss" scoped>
.header {
  .w {
    .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100px;
      .logo {
        span {
          img {
            vertical-align: middle;
          }
          &:nth-child(1) {
            img {
              width: 120px;
              height: 50px;
            }
          }
          &:nth-child(2) {
            width: 264px;
            height: 34px;
            font-size: 18px;
            color: #fff;
            background-color: #e43030;
            border-radius: 10px;
            padding: 5px;
            margin: 0 20px;
          }
        }
      }
      .phone-lang {
        line-height: 100px;
        .phone {
          height: 100px;
          margin: 0 50px;
          img {
            width: 28px;
            height: 28px;
            margin: 0 17px;
          }
          span {
            font-size: 32px;
            font-weight: bold;
            color: #0c7fea;
          }
        }
        .language {
          display: inline-block;
          width: 150px;
          text-align: center;
          height: 96px;
          z-index: 999;
          color: #7c7c7c;
          border-left: 1px solid #f4f4f4;
          cursor: pointer;
          svg {
            vertical-align: middle;
            font-size: 12px;
          }
          position: relative;
          .dropdown {
            width: 150px;
            border-left: 1px solid #f4f4f4;
            height: 116px;
            display: none;
            background-color: #fff;
            // background-color: pink;
            position: absolute;
            top: 96px;
            transition: all 0.2s;

            ul {
              box-sizing: border-box;
              padding: 5px;
              text-align: left;
              font-size: 14px;
              // border: 1px solid #f4f4f4;
              li {
                height: 53px;

                line-height: 52px;
                svg {
                  margin: 0 5px;
                  border-radius: 50%;
                  box-shadow: #7c7c7c 2px;
                }
              }
            }
          }
          &:hover {
            .dropdown {
              display: block;
            }
          }
        }
      }
    }
  }
}
.isSelected {
  background-color: #dcdcdc;
}
</style>